<template>
  <div id="cesiumContainer"></div>
  <div class="bar">
    <button @click="startRoaming">开始漫游</button>
    <button @click="stopRoaming">停止漫游</button>
    <div>当前时间：{{ datas.formatString }}</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  Entity,
  SampledPositionProperty,
  Cartesian3,
  JulianDate,
  ClockRange,
  VelocityOrientationProperty,
} from "cesium";

import * as Cesium from "cesium";
import { useCesium } from "../composables";
import Dayjs from "dayjs";
const { initViewer } = useCesium("cesiumContainer");
const datas = reactive<{ viewer?: Cesium.Viewer; formatString: string }>({
  formatString: "",
});

function random(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

const createRandomPoint = () => {
  const jd = random(116.38 * 1000, 116.4 * 1000) / 1000;
  const wd = random(39.9 * 1000, 39.92 * 1000) / 1000;
  return Cesium.Cartesian3.fromDegrees(jd, wd, 0);
};

let carEntity: Entity;
const startTime = JulianDate.addSeconds(
  JulianDate.fromDate(new Date()),
  -5,
  new JulianDate()
);
// const stopTime = JulianDate.addSeconds(startTime, 30, new JulianDate());

onMounted(() => {
  datas.viewer = initViewer();
  datas.viewer.camera.setView({
    destination: Cartesian3.fromDegrees(116.397477, 39.908692, 5000),
  });

  // 一个单击取点的方法
  // const handler = datas.viewer.screenSpaceEventHandler;
  // handler.setInputAction((evt: any) => {
  //   const position = evt.position;
  //   if (position) {
  //     const ray = datas.viewer?.camera.getPickRay(position);
  //     const c = datas.viewer?.scene.globe.pick(ray!, datas.viewer?.scene);
  //     const g = Cesium.Cartographic.fromCartesian(c!);

  //     const lat = Cesium.Math.toDegrees(g.latitude);
  //     const lon = Cesium.Math.toDegrees(g.longitude);
  //     console.log(`纬度：${lat},经度：${lon}`);
  //   }
  // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  const positionProperty = new Cesium.SampledPositionProperty();
  // const time = JulianDate.addSeconds(startTime, 0, new JulianDate());
  const p0 = Cartesian3.fromDegrees(116.39799405060047, 39.90642502942713, 0);
  positionProperty.addSample(startTime, p0);
  const p1 = createRandomPoint();
  positionProperty.addSample(JulianDate.fromDate(new Date()), p1);
  const positions = [p0, p1];
  setInterval(() => {
    const p = createRandomPoint();
    positions.push(p);
    positionProperty.addSample(JulianDate.fromDate(new Date()), p);
  }, 5000);

  carEntity = datas.viewer.entities.add({
    position: positionProperty,
    model: {
      uri: "http://192.168.0.203:8081/lincang/gltf/mars/qiche.gltf", // 替换为小车模型的路径
      minimumPixelSize: 128,
      maximumScale: 5,
    },
    polyline: {
      positions: new Cesium.CallbackProperty(() => {
        const currentTime = datas.viewer?.clock.currentTime;
        const p = positionProperty.getValue(currentTime)!;
        if (p) positions[positions.length - 1] = p;
        return positions;
      }, false),
      material: Cesium.Color.RED,
      width: 3,
      clampToGround: true,
    },
    orientation: new VelocityOrientationProperty(positionProperty),
  });

  datas.viewer.clock.startTime = startTime.clone();
  datas.viewer.clock.currentTime = startTime.clone();
  // datas.viewer.clock.stopTime = stopTime.clone();
  datas.viewer.clock.clockRange = ClockRange.LOOP_STOP;
  datas.viewer.clock.multiplier = 1;

  // datas.viewer.clock.onStop.addEventListener(() => {
  //   datas.viewer!.clock.shouldAnimate = false;
  // });

  datas.viewer!.clock.shouldAnimate = true;
  datas.viewer!.clock.onTick.addEventListener(() => {
    const currentTime = datas.viewer!.clock.currentTime;
    const date = JulianDate.toDate(currentTime);
    datas.formatString = Dayjs(date).format("YYYY-MM-DD HH:mm:ss");
  });
});
const startRoaming = () => {
  // datas.viewer!.trackedEntity = carEntity;
  datas.viewer!.clock.shouldAnimate = true;

  // setTimeout(() => {
  //   datas.viewer!.camera.setView({
  //     destination: Cartesian3.fromDegrees(
  //       116.39799405060047,
  //       39.90642502942713,
  //       5000
  //     ),
  //     orientation: {
  //       heading: Cesium.Math.toRadians(-90), // 设置相机朝向
  //       pitch: Cesium.Math.toRadians(-90), // 设置相机俯仰角
  //       roll: 0.0, // 设置相机滚转角
  //     },
  //   });
  // }, 50);
};

const stopRoaming = () => {
  // viewer.value!.clock.shouldAnimate = false;
};
</script>

<style scoped lang="less">
#cesiumContainer {
  height: 100vh;
}
.bar {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: aliceblue;
}
</style>
